<include file="public:header"/>
<include file="public:sidebar"/>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            红包申请
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">红包</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="col-md-12">
            <div style="margin: 10px;">
                <button onclick="history.go(-1)" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">
                    <i class="layui-icon">&#xe65c;</i>返回
                </button>
            </div>
            <!-- Horizontal Form -->
            <div class="box box-info">
                <div class="box-header with-border">
                    <h3 class="box-title">红包申请</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form action="{:Url('redpack/insert')}" method="post"
                      class="form-horizontal layui-form" autocomplete="off">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                <span class="text-danger">*</span>申请商户
                            </label>
                            <div class="col-sm-4">
                                <input type="text" readonly class="form-control"
                                       placeholder="姓名" name="name"
                                       lay-verify="required"
                                 value="<notempty name='info'>{$info.name}</notempty>">
                                <input type="hidden" readonly name="mc_id"
                                       value="<notempty name='info'>{$info.id}</notempty>">
                                <input type="hidden" readonly name="proxy_id"
                                       value="<notempty name='info'>{$info.proxy_id}</notempty>">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                红包类型
                            </label>
                            <div class="col-sm-4">
                                <select name="type" lay-filter="type" class="form-control">
                                    <option value="1">全国</option>
                                    <option value="2">省级</option>
                                    <option value="3">市级</option>
                                    <option value=4>县级</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                充值金额
                            </label>
                            <div class="col-sm-4">
                                <input type="number" value="0" id="total"
                                       name="total" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                                实际金额
                            </label>
                            <div class="col-sm-6">
                                <p class="form-control-static text-warning">
                                    您本次充值:<span class="total">0</span>元，
                                    手续费:<span class="free">0</span>元，
                                    实际收取:<span class="totals">0</span>元。
                                </p>
                                <code>
                                    实收金额 = 充值金额 + (充值金额 * 0.1  = 功能费) + ((充值金额 - 功能费)  * 0.01 = 微信手续费)
                                </code>
                                <div>
                                    <b class="form-control-static text-warning">
                                        如需紧急使用，请联系客服： <code>133 9676 7895</code>
                                    </b>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">
                            </label>
                            <div class="col-sm-4">
                                <button type="submit" class="btn btn-info" lay-submit lay-filter="*">确定</button>
                                <!--<button type="reset" class="btn btn-default">取消</button>-->
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
<script>
    var url = "{:Url('redpack/index')}";
    layui.use(['form','layer'],function () {
        var form = layui.form,
            layer = layui.layer;
        form.on('submit(*)', function(data){
            var val = Number($('#total').val()),
                type = $('select[name="type"]').val();
            if(!val){
                layer.msg('请填写充值金额');
                return false;
            }
            var result = money(val,type);
            data.field.total = result.total;
            data.field.free = result.free;
            data.field.totals = result.totals;
            var index = layer.load(2,{shade: [0.8, '#000']});
            $.post(data.form.action,data.field,function (result) {
                layer.close(index);
                if(result.code){
                    layer.msg(result.msg);
                    return false;
                }
                layer.alert(result.msg,{icon:6,end:function () {
                    location.href = result.data.redirect;
                }});
            });
            return false;
        });

        $('#total').bind("input propertychange",function(event){
            var val = Number($(this).val()),
                type = $('select[name="type"]').val();
            if(val){
                 var data = money(val,type);
                 $('.total').text(data.total);
                 $('.free').text(data.free);
                 $('.totals').text(data.totals);
            }else{
                $('.total').text(0);
                $('.free').text(0);
                $('.totals').text(0);
            }
        });

        form.on('select(type)', function(data){
            var val = Number($('#total').val());
            if(val){
                var result = money(val,data.value);
                $('.total').text(result.total);
                $('.free').text(result.free);
                $('.totals').text(result.totals);
            }
        });
    });

    function money(val,type) {
        var p = Number({$site.jichu});
        // var data = {
        //     1 : 1500,
        //     2 : 800,
        //     3 : 500,
        //     4 : 300,
        // };
        var data = {$site.fengding|raw};
        var free = (val  * p).toFixed(2);
        if(free > Number(data[type])){
            free =  Number(data[type]);
        }
        var kou = ((val - free) * 0.01).toFixed(2);
        var totals = Number(val) + Number(free) + Number(kou);
        return {
            'total': val,
            'free': free,
            'totals': totals,
        };
    }
    function init(){
        var data = $('form').serialize();
        layui.use(['laytpl','layer'],function () {
            var laytpl = layui.laytpl,
                layer = layui.layer;
            var index = layer.load(2,{shade: [0.8, '#000']});
            $.post(url,data,function (result) {
                layer.close(index);
                if(result.code === 0){
                    var getTpl = demo.innerHTML;
                    laytpl(getTpl).render(result.data, function(html){
                        $('table>tbody').html(html);
                        $('#pages').val(result.data.current_page);
                    });
                }
            });
        });
    }
</script>
<include file="public:footer"/>